const app = getApp();
const utils = require("../../utils/util.js");
import * as echarts from '../../ec-canvas/echarts';

Page({
  data: {
    skin: "",
    name: "",
    id: "",
    time: utils.formatTime(new Date()),
    timer: 0, // 定时器
    active: 1, // tab的active
    ec: {
      lazyLoad: true
    },
  },

  onLoad(options) {
    const { skin } = app.globalData;
    const { id, title, name } = options;
    this.setData({ skin, id, name });

    // 设置标题
    wx.setNavigationBarTitle({ title });

    // 时间定时器
    this.timer = setInterval(() => {
      this.setData({
        time: utils.formatTime(new Date()),
      });
    }, 1000);
  },

  onReady() {
    const series = {
      name: "温度",
      type: "line",
      data: [
        ['2021-12-24 09:20:23', 20],['2021-12-25 09:20:23',36], ['2021-12-26 09:20:23',30]
      ]
    };

    this.initChartWendu({"series" : series});
  },
  
  handleBeginTimeChange(e) {
    this.setData({
      beginTime: e.detail
    })
    // TODO 更新wechat
  },

  handleEndTimeChange(e) {
    this.setData({
      endTime: e.detail
    })
    // TODO 更新wechat
  },

  // 初始化温度echat
  initChartWendu(data) {
    this.chartCmpWendu = this.selectComponent('#chart-wendu')
    this.chartCmpWendu.init((canvas, width, height, dpr) => {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr
      })
      chart.setOption(this.getTemperatureOption(data))
      return chart
    })
  },

    //---获取温度湿度图标参数 begin
    getTemperatureOption(temperatireOptions) {
      const option = {
        // title: {
        //   left: 8,
        //   text: '温度',
        //   textStyle: {
        //     color: '#333333',
        //     fontSize: 14
        //   }
        // },
        // legend: {
        //   right: 24,
        //   data: ['温度']
        // },
        tooltip: {
          trigger: 'axis',
          formatter: function(params) {
            console.log(params);
            return (params[0].data[0] + '\n' +"温度:" +  params[0].data[1] + "℃")
          },
          axisPointer: {
            type: 'cross'
          },
          feature: {
            dataView: {show: true, readOnly: false},
            restore: {show: true},
            saveAsImage: {show: true}
          }
        },
        xAxis: {
          type: 'time',
          boundaryGap: false,
          axisTick: {
            show: false
          }
        },
        yAxis: [
          {
            type: 'value',
            name: '温度(°C)',
            min: 0,
            max: 100,
            position: 'left',
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#91CC75',
                    fontSize : 8
                }
            },
            axisLabel: {
                formatter: '{value}'
            }
          }
        ],
        series: temperatireOptions.series, 
        dataZoom: [
          {
            type: 'slider',
            show: false,//show属性为false不展示缩放手柄，为true展示缩放手柄
            start: 0,
            end: 100,
            // handleSize: 88  该属性是缩放手柄的宽度
          },
          {
            type: 'inside',
            start: 0,
            end: 100
          }
        ]
      };
      return option;
    }, //---获取温度湿度图标参数 end

  // 切换tab
  onChangeTab(e) {
    const { active } = e.currentTarget.dataset;
    this.setData({
      active: +active,
    });
  },

  onUnload() {
    // 清除定时器
    const { timer } = this;
    clearInterval(timer);
  },
  toWarnningPage() {
    wx.navigateTo({
      url: '/pages/control/warning/index'
    });
  },
  toSettingPage() {
    wx.navigateTo({
      url: '/pages/control/setting'
    });
  },
  toRealtimePage() {
    wx.navigateTo({
      url: '/pages/control/realtime'
    });
  }
});
